<template>
    <div class="page-header-box">
        <el-page-header @back="goBack" :content="content" class="pageHeader" icon="el-icon-arrow-left"></el-page-header>
        <el-divider v-if="needUnderline"></el-divider>
    </div>
</template>

<script>
export default {
    props: {
        content: {
            type: String,
            default: ""
        },
        needBack: {
            type: Boolean,
            default: false
        },
        needUnderline: {
            type: Boolean,
            required: true
        },
        backRouter:  {
            type: String,
            default: null
        }
    },

    methods: {
        goBack() {
            if (this.backRouter) return this.$router.push(this.backRouter)
            this.$router.back()
        }
    },

    mounted() {
        // 替换el-page-header组件中的返回字体图标
        let iEle = this.$(".el-icon-back")
        iEle.addClass("el-icon-arrow-left")
        iEle.removeClass("el-icon-back")
        let divEle = this.$(".el-page-header__title")
        divEle.remove()

        // 隐藏或显示返回键
        if (!this.needBack) {
            let ele = this.$(".el-page-header__left")
            ele.hide()
        }
    }
}
</script>

<style lang="less" scoped>
.page-header-box {
    height: 65px;
    box-sizing: border-box;
}

.pageHeader {
    height: calc(100% - 1px);
    display: flex;
    align-items: center;
    padding: 0 15px;
}

.el-divider {
    box-sizing: border-box;
    height: 1px;
}

::v-deep .el-icon-arrow-left {
    font-size: 26px;
}

::v-deep .el-page-header__left::after {
    content: none;
}

::v-deep .el-page-header__left {
    position: absolute;
}

::v-deep .el-page-header__content {
    margin: auto;
    font-size: 24px;
}

::v-deep .el-divider--horizontal {
    margin: 0 0 1vh 0;
}
</style>